<template>
  <div class="baseForm dragg-baseForm ">
    <a-form :model="formState" autoComplete="off" labelAlign="right" ref="baseForm">
      <template v-for="(section, section_index) in formState" :key="section_index">
        <div class="baseForm-sections" :id="section.id">
          <div class="titleSetting" v-if="section.type == 'title' && section.value">{{ section.value }}</div>
          <template v-for="(formItem, formItem_index) in section.children" :key="formItem_index">
            <!-- 单选框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :extra="formItem.extra"
              :label="formItem.label" v-if="formItem.type == 'radio' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) :
                true)" :style="{ marginLeft: formItem.marginLeft + 'px', marginTop: formItem.marginTop + 'px' }"
              :rules="[formItem.rule]" class="form-a-radio-group">
              <a-radio-group v-model:value="formItem.value">
                <template v-for="(options, index_options) in formItem.options" :key="index_options">
                  <a-radio :value="formItem.isBoolean ? (index_options ? false : true) : (+index_options + 1)">
                    {{ options }}
                  </a-radio>
                </template>
              </a-radio-group>
              <!-- tips -->
              <a-tooltip placement="right" v-if="formItem.tips">
                <template #title>
                  <span>{{ formItem.tips }}</span>
                </template>
                <span class="iconfont icon-hint1"></span>
              </a-tooltip>
            </a-form-item>
            <!-- 动态增加、减少表单项 组件-->

            <a-form-item :style="{ marginLeft: 0, marginTop: 24 + 'px' }"
              :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              :rules="[formItem.rule]" v-else-if="formItem.type == 'addDomain_associated'">
              <a-form-item-rest>
                <slot name="addDomain" :list="formItem.options" :section_index="section_index"
                  :formItem_index="formItem_index"></slot>
              </a-form-item-rest>
            </a-form-item>
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label" v-else-if="formItem.type == 'addDomain' &&
              (formItem.associated
                ? hiddenAssociatedItem(formItem, formState)
                : true)
              " :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated
                ? 'form-a-radio-group_associated'
                : 'form-a-number-input'
                ">
              <a-button type="dashed" class="addDomain" @click="addDomain(section_index, formItem_index)"
                :disabled="(section.children[formItem_index - 1].maxLength ? section.children[formItem_index - 1].options?.length >= section.children[formItem_index - 1].maxLength : false) || false">
                <PlusOutlined />
                <span class="iconfont icon-Add"></span>
                <span>{{ formItem.value }}</span>
              </a-button>
            </a-form-item>
            <!-- 选项选择 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :extra="formItem.extra"
              :label="formItem.label" v-if="formItem.type == 'selectContent' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) :
                true)" :style="{ marginLeft: formItem.marginLeft + 'px', marginTop: formItem.marginTop + 'px' }"
              :rules="[formItem.rule]" class="form-a-radio-group">
              <draggable :list="formItem.selectContentList" ghost-class="edit-ghost" handle=".edit" filter=".forbid"
                :force-fallback="true" chosen-class="edit-chosenClass" animation="300" @start="onStart" @end="onEnd"
                :fallback-class="true" dragClass="dragClass" :fallback-on-body="true" :touch-start-threshold="50"
                :fallback-tolerance="50" :move="onMove">
                <template #item="{ element }">
                  {{ element }}
                  <a-radio v-model:checked="element.check" class="edit-item edit">
                    <a-input v-model:value="element.name"
                      :style="{ width: (formItem.width ? formItem.width : 232) + 'px', paddingLeft: '8px' }"
                      :maxlength="formItem.maxCount" :disabled="formItem.disabled" allow-clear />
                    <i class="iconfont icon-drag" style="margin-left: 8px;"></i>
                    <i class="iconfont icon-delete" style="font-size:16px;"></i>
                  </a-radio>
                </template>
              </draggable>
              <div class="add-option" @click="addOption">
                <i class="iconfont icon-Add" style="font-size: 24px;"></i>
                <span>新增选项</span>
              </div>
              <!-- tips -->
              <a-tooltip placement="right" v-if="formItem.tips">
                <template #title>
                  <span>{{ formItem.tips }}</span>
                </template>
                <span class="iconfont icon-hint1"></span>
              </a-tooltip>
            </a-form-item>
            <!-- 按钮单选框 -->
            <a-form-item :name="[formItem.value]" :extra="formItem.extra" :label="formItem.label"
              v-if="formItem.type == 'radioButton' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" class="form-a-radio-group">
              <a-radio-group v-model:value="(formItem.value)">
                <template v-for="(options, index_options) in formItem.options" :disabled="formItem.disabled"
                  :key="index_options">
                  <a-radio-button :disabled="formItem.disabled"
                    :value="formItem.isBoolean ? (index_options ? false : true) : (+index_options + 1)">
                    {{ options }}
                  </a-radio-button>
                </template>
              </a-radio-group>
              <!-- tips -->
              <a-tooltip placement="right" v-if="formItem.tips">
                <template #title>
                  <span>{{ formItem.tips }}</span>
                </template>
                <span class="iconfont icon-hint1"></span>
              </a-tooltip>
            </a-form-item>
            <!-- 特殊位置-数字输入框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'selectInput' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" class="form-a-radio-group_associated">
              <span class="beforeText">{{ formItem.beforeText }}</span>
              <a-input-number v-model:value="formItem.value" placeholder="请输入整数" :min="1" :max="100000" />
              <span class="afterText">{{ formItem.afterText }}</span>
            </a-form-item>
            <!-- 数字输入框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'numberInput' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :style="{ marginLeft: formItem.marginLeft + 'px', marginTop: formItem.marginTop + 'px' }"
              :rules="[formItem.rule]" class="form-a-number-input">
              <span class="beforeText" v-if="formItem.beforeText">{{ formItem.beforeText }}</span>
              <a-input-number :disabled="formItem.disabled" v-model:value="formItem.value" placeholder="请输入整数"
                :precision="formItem.precision ? formItem.precision : 0"
                :min="formItem.min != undefined ? formItem.min : 1"
                :max="formItem.max != undefined ? formItem.max : 100000000" />
              <!-- <span style="margin-left:8px">{{ formItem.max }}</span> -->
              <span class="afterText" v-if="formItem.afterText">{{ formItem.afterText }}</span>
              <div class="number-tips">{{ formItem.tips }}</div>
            </a-form-item>
            <!-- 多个数字输入框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'mulNumberInput' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :style="{ marginLeft: formItem.marginLeft + 'px' }" :rules="[formItem.rule]" class="form-a-number-input">
              <a-form-item-rest>
                <div class="min-max-box">
                  <div class="min-max" style="margin-right:24px">
                    <span class="beforeText" v-if="formItem.minBeforeText">{{ formItem.minBeforeText }}</span>
                    <a-input-number v-model:value="formItem.minValue" placeholder="请输入整数" :min="1" :max="100000" />
                    <span class="afterText" v-if="formItem.minAfterText">{{ formItem.minAfterText }}</span>
                  </div>
                  <div class="min-max" :style="{ 'margin-top': formItem.marginTop + 'px' }">
                    <span class="beforeText" v-if="formItem.maxBeforeText">{{ formItem.maxBeforeText }}</span>
                    <a-input-number v-model:value="formItem.maxValue" placeholder="请输入整数" :min="1" :max="100000" />
                    <span class="afterText" v-if="formItem.maxAfterText">{{ formItem.maxAfterText }}</span>
                  </div>
                  <!-- <div class="mulnumber-tips" v-html="formItem.tips"></div> -->
                  <div v-if="formItem.showTip" class="img-tip">
                    <span>{{ formItem.showTipText }}上传格式大小可以在</span><a
                      @click="goSite">站点管理</a><span>中的【编辑】-【扩展设置】中调整</span>
                  </div>
                </div>
              </a-form-item-rest>
            </a-form-item>
            <!-- 基础文字输入框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'textInput' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :extra="formItem.extra"
              :style="{ marginLeft: formItem.marginLeft + 'px', marginTop: formItem.marginTop ? formItem.marginTop : 24 + 'px' }"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <a-form-item-rest>
                <div class="item-content">
                  <div>
                    <span class="beforeText" v-if="formItem.beforeText">{{ formItem.beforeText }}</span>
                    <a-input v-model:value="formItem.value" :placeholder="formItem.placeholder"
                      :style="{ width: (formItem.width ? formItem.width : 304) + 'px' }" :show-count="formItem.showCount"
                      :maxlength="formItem.maxCount" :disabled="formItem.disabled" allow-clear />
                    <span class="afterText" v-if="formItem.afterText">{{ formItem.afterText }}</span>
                    <a-form-item-rest>
                      <template v-for="(greylist, greylist_index) in formItem.greyWhitelist" :key="greylist_index">
                        <div>
                          <a-input v-model:value="greylist.value" :placeholder="formItem.placeholder"
                            class="greyWhitelist_input" show-count :maxlength="25" allow-clear>
                          </a-input>
                          <span class="iconfont icon-delete"
                            @click="deleteWhiteList(section_index, formItem_index, greylist_index)"></span>
                        </div>

                      </template>
                    </a-form-item-rest>
                    <a-form-item-rest>
                      <div class="greyWhitelist_addWhitelist" v-if="formItem.addWhitelist">
                        <span
                          :class="formItem.greyWhitelist.length >= formItem.maxNum ? 'greyColor' : 'greyWhitelist_span'"
                          @click="addGreyWhitelist(section_index, formItem_index)">新增白名单</span>
                        <!-- tips -->
                        <a-tooltip placement="right" v-if="formItem.tips">
                          <template #title>
                            <span>{{ formItem.tips }}</span>
                          </template>
                          <span class="iconfont icon-hint1"></span>
                        </a-tooltip>
                      </div>
                    </a-form-item-rest>
                  </div>
                </div>
              </a-form-item-rest>
            </a-form-item>
            <!-- 基础多行文字输入框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'textArea' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :extra="formItem.extra" :style="{ marginLeft: formItem.marginLeft + 'px' }"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <a-form-item-rest>
                <div class="textarea-content">
                  <span class="beforeText" v-if="formItem.beforeText">{{ formItem.beforeText }}</span>
                  <a-textarea v-model:value="formItem.value" :placeholder="formItem.placeholder"
                    :show-count="formItem.showCount" :maxlength="formItem.maxCount" allow-clear />
                  <span class="afterText" v-if="formItem.afterText">{{ formItem.afterText }}</span>
                  <a-form-item-rest>
                    <template v-for="(greylist, greylist_index) in formItem.greyWhitelist" :key="greylist_index">
                      <div>
                        <a-input v-model:value="greylist.value" :placeholder="formItem.placeholder"
                          class="greyWhitelist_input" show-count :maxlength="25" allow-clear>
                        </a-input>
                        <span class="iconfont icon-delete"
                          @click="deleteWhiteList(section_index, formItem_index, greylist_index)"></span>
                      </div>
                    </template>
                  </a-form-item-rest>
                  <a-form-item-rest>
                    <div class="greyWhitelist_addWhitelist" v-if="formItem.addWhitelist">
                      <span :class="formItem.greyWhitelist.length >= formItem.maxNum ? 'greyColor' : 'greyWhitelist_span'"
                        @click="addGreyWhitelist(section_index, formItem_index)">新增白名单</span>
                    </div>
                  </a-form-item-rest>
                  <a-tooltip placement="right" v-if="formItem.tips">
                    <template #title>
                      <span>{{ formItem.tips }}</span>
                    </template>
                    <span class="iconfont icon-hint1" style="margin-left: 8px;"></span>
                  </a-tooltip>
                </div>
              </a-form-item-rest>
            </a-form-item>
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'selectInput' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" class="form-a-radio-group_associated">
            </a-form-item>
            <!-- 可复选的selecte框 -->
            <div class="form-item-title" v-else-if="formItem.type == 'title'">{{ formItem.value }}</div>
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'multipleSelect' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :extra="formItem.extra"
              :style="{ width: (formItem.width ? formItem.width : 304) + 'px', marginLeft: formItem.marginLeft + 'px' }"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <a-select v-model:value="formItem.value" :mode="formItem.mode" :placeholder="formItem.placeholder"
                :maxTagCount='formItem.maxTagCount'
                :options="formItem.options.map((item: any, index: number) => ({ value: item.value || (formItem.mode == 'single' ? index + 1 : item), label: item.label || item, disabled: item.disabled || false }))"
                :disabled="formItem.disabled" @change="selectChange"></a-select>
            </a-form-item>
            <!-- 带选项的数字输入框 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'selecteNumberInput' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <a-form-item-rest>
                <a-input-number v-model:value="formItem.value" :step="formItem.stringMode ? 0.01 : 1">
                  <template #addonAfter>
                    <a-select v-model:value="formItem.optionsValue" style="width: 78px" :options="formItem.options.map((item: any, index: number) => ({
                      value: index + 1, label: item
                    }))"></a-select>
                  </template>
                </a-input-number>
              </a-form-item-rest>
            </a-form-item>
            <!-- 图片上传组件 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'singlePictrueUpload' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :extra="formItem.extra"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'"
              @click="getIndex(section_index, formItem_index)">
              <span class="beforeText upload-pic" v-if="formItem.beforeText">{{ formItem.beforeText }}</span>
              <a-form-item-rest>
                <upload :fileList="formItem.value" @uploadFinished="uploadFinished"
                  @upload_remove_Finished="upload_remove_Finished" :maxCount="formItem.maxCount" :accept="formItem.accept"
                  :title="formItem.uploadTitle" :isAutoUpload="true"></upload>
              </a-form-item-rest>

            </a-form-item>
            <!-- 水印图片位置选择 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'grigPosition' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :extra="formItem.extra" class="form-a-waterMarkGrid">
              <!-- <div class="waterMarkGrid">
                  <span v-for="(watermark_item, watermark_item_index) in formItem.watermarkPosition"
                    :class="formItem.value == watermark_item_index + 1 ? 'span-active' : ''"
                    @click="selectWaterMarkPosition(section_index, formItem_index, watermark_item_index + 1)">{{
      watermark_item
                    }}</span>
                </div> -->
              <a-radio-group v-model:value="formItem.value" class="waterMarkGrid">
                <a-radio-button :value="watermark_item_index + 1"
                  :class="formItem.value == watermark_item_index + 1 ? 'span-active' : 'span-deactive'"
                  v-for="(watermark_item, watermark_item_index) in formItem.watermarkPosition">{{
                    watermark_item
                  }}</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <!-- 颜色拾取器 -->
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'colorPicker' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <color-picker v-model:hex="formItem.value"></color-picker>
            </a-form-item>
            <!-- 级联选择器 -->
            <a-form-item
              v-else-if="formItem.type == 'cascader' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :name="formItem.name" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
              :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
              <a-cascader :style="{ width: formItem.width ? formItem.width + 'px' : 304 + 'px' }"
                :show-search="{ filter }" :options="formItem.options"
                :display-render="formItem.displayRender ? displayRender : undefined" expand-trigger="click"
                :placeholder="formItem.placeholder" changeOnSelect @change="onChange" v-model:value="formItem.value"
                :fieldNames="formItem.fieldNames || {}" />
            </a-form-item>
            <!-- 级联选择器-省市区专用 -->

            <a-form-item
              v-else-if="formItem.type == 'cascaderArea' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :name="formItem.name" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
              :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">

              <a-cascader :style="{ width: formItem.width ? formItem.width + 'px' : 304 + 'px' }"
                :show-search="{ filter }" :options="areaData"
                :display-render="formItem.displayRender ? displayRender : undefined" expand-trigger="click"
                :placeholder="formItem.placeholder" changeOnSelect @change="onChange" v-model:value="formItem.value"
                :fieldNames="formItem.fieldNames || {}" />
            </a-form-item>
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'keyValue' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              {{ formItem.value }}
            </a-form-item>
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'tipSize' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :extra="formItem.extra"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <div class="img-tip">
                <span>{{ formItem.tips }}上传格式大小可以在</span><a @click="goSite">站点管理</a><span>中的【编辑】-【扩展设置】中调整</span>
              </div>
            </a-form-item>
            <a-form-item :name="[section_index, 'children', formItem_index, 'value']" :label="formItem.label"
              v-else-if="formItem.type == 'checkbox' && (formItem.associated ? hiddenAssociatedItem(formItem, formState) : true)"
              :rules="[formItem.rule]" :style="{ marginLeft: formItem.marginLeft + 'px' }" :disabled="formItem.disabled"
              :extra="formItem.extra"
              :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
              <a-checkbox-group :disabled="formItem.disabled" @change="onChangeBox(formItem.value)"
                v-model:value="formItem.value" :options="formItem.options" />
            </a-form-item>
            <!-- <div class="form-a-number-text" v-else-if="formItem.type == 'keyValue'">
              <span>{{ formItem.label }}</span>
              <span>{{ formItem.value }}</span>
            </div> -->
          </template>
        </div>

      </template>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import upload from "@/components/upload/uploadFile.vue";
import { ref, watch, onMounted } from "vue";
import draggable from "vuedraggable";
import { useRouter } from 'vue-router'
import { dataSourceType, } from "@/type.d";
import request from "@/api/index";
//props
const props = defineProps({
  formState: {
    type: Array,
    default: [] as dataSourceType
  },
  width: {
    type: Number,
    default: 0
  }

})
const queryParam = ref({
  orgId: '',
  teamId: '',
})
//emit
const emit = defineEmits([
  "deleteWhiteList",
  "addGreyWhitelist",
  "getIndex",
  "addDomain",
  'add_option',
  "uploadFinished",
  "selectWaterMarkPosition",
  "upload_remove_Finished", 'selectChange'])
//data
const formState = ref(props.formState as any);
const baseForm = ref(null);
const router = useRouter();
//地区
const areaData = ref<dataSourceType[]>([]);


//watch
watch(() => props.formState, (newVal, oldVal) => {
  formState.value = newVal;
}, { deep: true })


//methods
// 控制关联组件的显示隐藏
const hiddenAssociatedItem = (item: dataSourceType, formState: dataSourceType[]) => {
  let isHidden = false;
  if (!item.associated) {
    return true
  }
  let associated = item.associated.split(',');
  let isH: (boolean)[] = [];
  associated.forEach((asso: string | number) => {
    formState.forEach((data) => {
      data.children.forEach((child: dataSourceType) => {
        if (asso == child.param) {
          if (item.associatedValue.toString().includes('!=')) {
            isH.push(item.associatedValue.split('!=')[1] != child.value);
          } else {
            isH.push(item.associatedValue == child.value);
          }
        }
      })
    })
    isHidden = isH.length ? isH.every(ish => ish != false) : true;

  })
  return isHidden
}
// 删除白名单
const deleteWhiteList = (index1: number, index2: number, index3: number) => {
  emit('deleteWhiteList', index1, index2, index3);
}
// 新增白名单
const addGreyWhitelist = (index1: number, index2: number) => {
  emit('addGreyWhitelist', index1, index2);
}
// 获取点击的是第几个元素
const getIndex = (index1: number, index2: number) => {
  emit('getIndex', index1, index2);
}
// 上传图片
const uploadFinished = (data: any) => {
  console.log(data);

  emit('uploadFinished', data)
}

//前往站点管理
const goSite = () => {
  router.push({
    path: "/c-views/config/siteManage",
    name: "站点管理",
  });
}

//拖拽开始
const onStart = (e: any) => {
  console.log(e, "开始拖拽");
}
//拖拽结束的事件
const onEnd = (e: any) => {

  // console.log(arr2, 99991)

}
const onMove = (e: any) => {

}

//新增选项
const addOption = () => {
  emit('add_option')
}
// 删除图片
const upload_remove_Finished = (data: any) => {
  emit('upload_remove_Finished', data)
}

// 动态添加form表单
const addDomain = (index1: number, index2: number) => {
  emit("addDomain", index1, index2);
};

const onChange = (value: any) => {
  // formItem.value = value;
};
const onChangeBox = (value: any) => {
  if (value[0] === '会员注册') {
    value = ['会员注册', '会员个人资料页面']
  }
};
const filter = (inputValue: any, path: any) => {
  return path.some((option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
const displayRender = ({ labels, selectedOptions }: { labels: any; selectedOptions: any }) => {
  // 初始化时selectedOptions为空数组，当选择某一项关闭弹窗的时候会触发这个方法，lables，selectedOptions返回为多级数组，如果是想要数据里面的id或者其他参数，可以使用selectedOptions
  if (selectedOptions.length === 0) {
    // 初始化和点击清除按钮触发
    queryParam.value.orgId = '';
    queryParam.value.teamId = '';
  } else {
    let item = selectedOptions[selectedOptions.length - 1];
    if (item.organizationType === 1) { // 机构
      queryParam.value.orgId = item.value;
      queryParam.value.teamId = '';
    } else { // 团队
      queryParam.value.teamId = item.value;
      queryParam.value.orgId = '';
    }
  }

  return labels[labels.length - 1];
};


const selectWaterMarkPosition = (index1: number, index2: number, index3: number) => {
  emit('selectWaterMarkPosition', index1, index2, index3)
}
const selectChange = () => {
  emit('selectChange')
}
//地区选择专用

const getAreaTree = () => {
  request.getAreaTree().then((res: dataSourceType[]) => {
    areaData.value = areaData.value.concat(res);
  })
}
//获取最大的label的宽度
const getWidth = () => {
  let labelLength: any[] = [];
  formState.value.forEach((item: any) => {
    item.children &&
      item.children.forEach((c_item: any) => {
        labelLength.push(c_item.label?.length || 0);
      });
  });
  let maxLength = Math.max(...labelLength);
  return { style: { width: (maxLength + 1) * 14 + "px" } };
};
// mounted
onMounted(() => {
  getAreaTree();
})
// defineExpose
defineExpose({ baseForm })
</script>

<style lang="less" scoped>
.baseForm {

  .img-tip {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 20px;
  }

  .baseForm-sections {
    padding-bottom: 16px;

    .titleSetting {
      height: 40px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 40px;
      background: #F7F8FA;
      border-radius: 2px 2px 2px 2px;
      position: relative;
      padding-left: 24px;
      margin-top: 24px;
    }

    .titleSetting:after {
      width: 3px;
      height: 12px;
      background: var(--theme_button_active_bg_color, #1050c7);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      content: '';
      position: absolute;
      left: 12px;
      z-index: 1;
      top: 14px;
    }

    .form-a-radio-group_associated {
      display: flex;
      margin-left: 217px;
      margin-top: 16px;

      .textarea-content {
        display: flex;
        flex-direction: row;
        align-items: end;
      }
    }

    .min-max-box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
    }

    .mulnumber-tips {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }

    .beforeText,
    .afterText {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .beforeText {
      margin-right: 12px;
    }

    .afterText {
      margin-left: 12px;
    }

    .number-tips {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }

    .ant-input-number {
      width: 136px;
    }

    .form-a-number-input {
      margin-top: 24px;
    }

    .form-a-number-text {
      display: flex;
      flex-direction: row;
      align-items: center;

      .ant-form-item-label {
        width: 168px;
      }

      .ant-form-horizontal .ant-form-item-control {
        width: auto;
      }
    }

    .form-item-title {
      padding-left: 32px;
      margin-top: 24px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }

    .upload-pic {
      margin-bottom: 8px;
      display: inline-block;
    }

    .greyWhitelist_input {
      width: 283px;
      margin-top: 16px;
    }

    .icon-delete {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 32px;
      margin-left: 8px;
    }

    .icon-delete:hover {
      color: rgba(0, 0, 0, 0.85)
    }

    .iconfont.icon-hint1 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45)
    }

    .greyWhitelist_addWhitelist {
      width: 304px;
      display: flex;
      justify-content: end;
      align-items: center;
      margin-top: 8px;
      line-height: 14px;

      .greyWhitelist_span {
        font-size: 14px;
        font-weight: 400;
        color: var(--theme_text_hightlight_color, #2f54eb);
        ;
        margin-right: 8px;
      }

      .greyWhitelist_span:hover {
        color: var(--theme_button_hover_bg_color, #597ef7);
      }

      .greyWhitelist_span:active {
        color: var(--theme_button_active_bg_color, #1d39c4);
      }

      .greyColor {
        color: rgba(0, 0, 0, 0.25);
      }
    }



    .waterMarkGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: 98px;
      width: 140px;
      grid-gap: 4px;

      .span-deactive {
        text-align: center;
        line-height: 30px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        font-size: 14px;
        color: #000;
        padding: 0;
        border: 1px dashed rgba(0, 0, 0, 0.15);
      }

      ive:hover {
        border-color: var(--theme_button_hover_bg_color, #4892fa);
      }

      .span-active {
        text-align: center;
        line-height: 30px;
        background: var(--theme_button_bg_color, #1F6DED);
        color: #fff;
        padding: 0;
      }
    }

    .form-a-waterMarkGrid {
      margin-top: 24px;
    }


  }
}


.addDomain {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 304px;

  .icon-Add {
    font-size: 24px;
  }
}

.edit-ghost {
  width: 100%;
  height: 40px;
  background-color: #EDF7FF !important;
  position: relative;
  line-height: 60px;
  list-style: none;
  font-size: 0;
  opacity: 1;
  border-width: 0 !important;
  z-index: 20;
  overflow: hidden;

  .z-preview,
  div,
  span,
  i {
    // 拖拽过程中，底层元素都不可见
    display: none
  }

  &:after {
    display: block;
    position: absolute;
    content: '';
    left: 50%;
    top: 0px;
    transform: translate(-50%, -0%);
    width: 100%;
    height: 20px;
    opacity: 1;
    background-color: #EDF7FF !important;
    border-bottom: 1px dashed #1F6DED;
    z-index: 2;
  }



  &:before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #EDF7FF;
    content: '放在这里';
    left: 50%;
    top: 50%;
    height: 25px;
    padding: 0 30px;
    line-height: 25px;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    color: #1F6DED;
    z-index: 3;
    font-size: 14px;
  }


}

.edit-item {
  margin: 8px 0;
}

.dragClass {
  background-color: #EDF7FF;
  height: max-content !important;
  padding: 12px 0;
}

.icon-drag {
  color: rgba(0, 0, 0, 0.45)
}

.icon-drag:hover {
  color: rgba(0, 0, 0, 0.85)
}

.add-option {
  margin-top: 8px;
  width: 304px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 2px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  span {
    margin-left: 4px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
<style lang="less">
.zs-color-picker-panel__visible {
  z-index: 10 !important;
}

.zs-color-picker-btn {
  width: 60px !important;
  border-radius: 2px !important;
}

.textarea-content .ant-tooltip {
  max-width: 305px;
}

.baseForm {
  .ant-form-item {
    margin-bottom: 0px;
    margin-left: 32px;

    .ant-form-item-label {
      text-align: left;
      width: 100%;
      font-weight: 400;
      margin-right: 8px;
    }

    .ant-select {
      width: 304px;
    }


  }

  .ant-form-item:nth-last-of-type(1) {
    margin-bottom: 0;
  }

  .ant-form-item-extra {
    width: 310px;
  }

  .form-a-radio-group {
    margin-top: 24px;
    font-weight: 400;

    .ant-form-item-label {
      label {
        height: 32px;
      }
    }

    .ant-form-item-control-input {
      min-height: 23px;
    }
  }
}

.ant-form-item-control-input-content {
  font-weight: 400;
}

.ant-form-item-control-input-content:hover {
  .anticon-close-circle {
    display: block;
  }

  .ant-input-show-count-suffix {
    // display: none;
  }
}
</style>